<template>
    <div class="con" @click.stop="toggle" @blur="toggle">
        <div class="tag-list" v-show="nodeList.length > 0">
            <el-tag class="tag-item"
                v-for="tag in nodeList"
                :key="tag.name"
                closable
                @close="closeTag(tag)"
            >
                {{tag.name}}
            </el-tag>
            <div class="tag-num">
                ({{nodeList.length}})
                <el-button @click="clear" type="text"><i class="el-icon-close"></i></el-button>
                
            </div>
        </div>
        <div v-show="nodeList.length == 0" class="placeholder">{{placeholder}}</div>
        
        <div class="tree-p" v-show="showTree">
          
            <el-tree ref="tree"
                :node-key="props.id"
                :props="props"
                :data="data"
                show-checkbox
                :check-strictly="strictly"
                @check-change="handleCheckChange"
               >
            </el-tree>
        </div>
    </div>
        
</template>
<script>
export default {
    props: {
        props: Object,
        data: Array,
        placeholder: String,
        strictly: Boolean
    },
    watch: {
        nodeList () {
            this.$emit('input', this.nodeList)
        }
    },
    data () {
        return {
            showTree: false,
            nodeList: []
        }
    },
    methods: {
        handleCheckChange (data, checked, indeterminate) {
            console.log(data, checked, indeterminate)
            if (checked) {
                this.addNodeList(data)
            } else {
                this.deleteNodeList(data)
            }
        },
        addNodeList (node) {
            this.nodeList.push(node)
        },
        deleteNodeList (node) {
            let index = -1
            for (let i = 0; i < this.nodeList.length; i++) {
                let item = this.nodeList[i]
                if (item[this.props.id] == node[this.props.id]) {
                    index = i
                    break
                }
            }
            if (index > -1) {
                this.nodeList.splice(index, 1)
            }

            this.$refs.tree.setChecked(node, false)
        },
        clear () {
            for (var item of this.nodeList) {
                this.$refs.tree.setChecked(item, false)
            }
            this.nodeList = []
        },
        closeTag (tag) {
            this.deleteNodeList(tag)
        },
        toggle () {
            this.showTree = !this.showTree
        }
    },
    mounted () {
        document.body.onclick = () => {
            this.toggle()
        }
    }
}
</script>
<style scoped>
.con{
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    min-height: 34px;
    line-height: 34px;
    outline: none;
    padding: 0 15px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
   
    position: relative;
}
.tree-p{
    position: absolute; z-index: 10; background: #fff; padding: 10px;
    border: 1px solid #dcdfe6;
    top: 100%;
    left: 0;
    height: 300px; width: 100%; overflow-y: scroll;
}
.tag-list{
    width: 100%;
    overflow: hidden;white-space: nowrap;text-overflow: ellipsis;
    position: relative;
}
.tag-num{
    position: absolute;
    top: 5px; right: 1px;
}
.tag-item{
    margin: 0 5px 0 0;
}
.close-tree{
    position: absolute; top: 0; right: 0;
}
.placeholder {
        color: #bdbdbd;
}
</style>
